
<!-- 委托任务统计 -->

<template>
  <div class="chart3">
    <div class="chart3-title">
      <div class="chart3-title-left">
        <div class="logo"></div>
        报告数量统计
      </div>
      <div class="chart3-title-right">
        <el-dropdown
          size="mini"
          split-button
          @command="changeItem"
          :disabled="true"
        >
          {{ currentChange }}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="2022年">2022年</el-dropdown-item>
            <el-dropdown-item command="2021年">2021年</el-dropdown-item>
            <el-dropdown-item command="2020年">2020年</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="chart3-content">
      <div id="chart3" ref="chart3" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from "element-resize-detector";
import Vue from "vue";
import { Dropdown, DropdownMenu, DropdownItem } from "element-ui";
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
// echarts引入
import * as echarts from "echarts/core";
import {
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
]);

export default {
  data() {
    return {
      currentChange: "近六个月", //当前选中项
    };
  },
  methods: {
    // echarts配置项
    setOption() {
      var chartDom = document.getElementById("chart3");
      var myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },

            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Email",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [100, 100, 0, 0],
                color: "#eb33ad",
              },
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [100, 100, 0, 0],
                color: "#66ebe5",
              },
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ads",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [100, 100, 0, 0],
                color: "#fdb947",
              },
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
      };
      option && myChart.setOption(option);
      //  随外层div的大小变化自适应
      let erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.chart3, () => {
        this.$nextTick(() => {
          myChart.resize();
        });
      });
    },
    // 下拉选中
    changeItem(e) {
      console.log("选中的下拉项：", e);
      this.currentChange = e;
    },
  },
  mounted() {
    //echarts配置项
    this.setOption();
  },
  created() {},
};
</script>

<style lang='scss' scoped>
.chart3 {
  height: 100%;
  padding: 0 0.1rem;
  &-title {
    height: 0.45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left {
      display: flex;
      align-items: center;
      font-size: 0.14rem;
      font-weight: bold;
      .logo {
        width: 0.1rem;
        height: 0.3rem;
        background-color: rgb(209, 46, 46);
        margin-right: 0.1rem;
      }
    }
  }
  &-content {
    height: calc(100% - 0.55rem);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
}
</style>